<template>
  <view class="order_management">
    <u-loading-page mode="flower" :show="loadingShow"></u-loading-page>
    <view class="tab_nav">
      <nav-bar
        nav_btn="back"
        :index="index"
        @onPicker="getPicker"
        :title="title"
        :showPicker="showPicker"
        :color="color"
        :placeholder="placeholder"
        :list="list"
        :auto_img="image"
        :background="background"
      ></nav-bar>
    </view>

    <view class="header_share w750 flex">
      <input
        class="uni_ipt"
        type="text"
        v-model="keyword"
        value=""
        placeholder-style="color: #CCCCCC;"
        placeholder-class="s24 f500 family"
        placeholder="搜索"
      />
    </view>
    <view class="menu" @click="gotoczsh">
      <view class="left">
        <view class="img">
          <image
            src="@/static/cztztype1.png"
            style="width: 100%; height: 100%"
            v-if="type == 1"
          ></image>
          <image
            src="@/static/cztztype2.png"
            style="width: 100%; height: 100%"
            v-if="type == 2"
          ></image>
        </view>
        <view class="text">
          {{ type == 1 ? "充值提前到账审核" : "订单充值调整审核" }}
        </view>
      </view>
      <view class="right">
        <uni-badge
          class="uni-badge-left-margin"
          size="normal"
          :text="verify_count"
        />
        <uni-icons type="arrow-right" size="20" color="#999"></uni-icons>
      </view>
    </view>
    <view v-if="listData.length == 0" style="padding-top: 30rpx">
      <u-empty mode="list" text="暂无审核记录"></u-empty>
    </view>
    <view v-if="listData.length > 0">
      <view class="item" v-for="(item, index) in listData" :key="index">
        <view class="box">
          <view
            style="
              margin-bottom: 10rpx;
              padding-bottom: 20rpx;
              border-bottom: 1px solid #eee;
            "
          >
            <view class="warp">
              <view class="left" style="width: 100%">
                <view class="head">
                  <view>
                    <image
                      :src="item.avatar"
                      style="width: 90rpx; height: 90rpx; border-radius: 50%"
                    ></image>
                  </view>
                  <view style="margin-left: 20rpx">
                    <view class="text1">
                      {{ item.nickname }}
                    </view>
                    <view class="text2">
                      {{ item.mobile }}
                    </view>
                  </view>
                </view>
              </view>
              <view class="right">
                <view class="shje">+{{ item.cz_money }}</view>
                <view
                  class="shstatus"
                  :style="item.status == 4 ? 'color:red;' : ''"
                >
                  <image
                    src="../../static/Frame.png"
                    v-if="
                      (type == 1 && item.status == 1) ||
                      (type == 2 && item.status == 2)
                    "
                    style="width: 30rpx; height: 30rpx"
                  ></image>
                  <image
                    src="../../static/jue.png"
                    v-if="
                      (type == 1 && item.status == 2) ||
                      (type == 2 && item.status == 4)
                    "
                    style="width: 30rpx; height: 30rpx"
                  ></image>
                  <!-- <uni-icons type="checkmarkempty" size="18" v-if="item==1" style="vertical-align: middle;" color="#6ec844"></uni-icons>
									<uni-icons type="closeempty" size="18"  v-else style="vertical-align: middle;" color="red"></uni-icons> -->
                  {{ item.status | handleStatus(type) }}
                </view>
              </view>
            </view>
            <view class="list" v-for="(key, i) in item.recharge" :key="i">
              <view class="list-content">{{ key.shopname }}</view>
              <view class="list-content"
                >+{{ Number(key.money).toFixed(2) }}</view
              >
            </view>
          </view>
          <view class="warp info">
            <view class="left infoText">提交日期：{{ item.subtime }}</view>
            <view class="right infoText">审核日期：{{ item.verifytime }}</view>
          </view>
          <view class="warp info">
            <view class="left infoText"></view>
            <view class="right infoText">
              审核人:
              <text v-if="item.operator_name">{{ item.operator_name }}</text>
              <text v-else>暂无审核人</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type: 1,
      loadingShow: false,
      listData: [],
      verify_count: 1,

      list: [],
      background: "#ffffff",
      showPicker: true,
      shopId: 0,
      index: 0,
      title: "",
      image: "../static/tab_jian.png",
      color: "black",
    };
  },
  onLoad(option) {
    this.type = option.type;
    this.shopId = option.shopId;
    this.index = option.index;

    this.getShopList();

    if (this.type == 1) {
      uni.setNavigationBarTitle({
        title: "充值提前到账审核",
      });
    }
  },
  onReachBottom() {
    if (this.pageNum < this.lastPage) {
      this.pageNum++;
      this.getDetailData();
    } else {
      this.$wanlshop.msg("我是有底线的");
    }
  },
  onShow() {
    this.getListData();
  },
  filters: {
    handleStatus(val, type) {
      //提前到账审核
      if (type == 1) {
        return {
          1: "审核通过",
          2: "拒绝了请求",
        }[val];
      } else {
        return {
          2: "审核通过",
          3: "审核中",
          4: "拒绝了请求",
          7: "订单已取消",
        }[val];
      }
    },
  },
  methods: {
    //获取店铺列表
    getShopList() {
      this.$request({
        url: "wedding/shop_list",
        method: "POST",
        data: {
          keyword: "",
          type: 1,
        },
      }).then((res) => {
        this.list = res.data.data;
      });
    },
    // 获取店铺id
    getPicker(data) {
      this.shopId = this.list[data].id;
      this.index = data;
      this.getListData();
    },
    getListData() {
      this.loadingShow = true;
      let type = "1";
      if (this.type == 1) {
        uni.setNavigationBarTitle({
          title: "充值提前到账审核",
        });
        type = "2";
      }
      this.$request({
        url: "Manage/cz_verify",
        method: "post",
        data: {
          shop_id: this.shopId,
          form: "0",
          type: type,
          key: this.keyword,
        },
      })
        .then((res) => {
          const { code, data } = res.data;
          if (code == 1) {
            // this.listData = this.listData.concat(data.list.data)
            this.listData = data.list.data;
            this.loadingShow = false;
            this.verify_count = data.verify_count;
          }
        })
        .catch((e) => {
          this.loadingShow = false;
        });
    },
    gotoczsh() {
      uni.navigateTo({
        url: "./czsh?type=" + this.type + "&shopId=" + this.shopId,
      });
    },
  },
};
</script>

<style lang="scss">
.container {
  width: 100%;
  background-color: #ffffff;
}

.order_management {
  overflow: hidden;
  padding-bottom: 50upx;
  background-color: #ffffff;

  .tab_nav {
    background-color: #ffffff;
  }

  .header_share {
    height: 94upx;
    background: #ffffff;
    overflow: hidden;

    .uni_ipt {
      height: 68upx;
      background: #f3f3f3;
      border-radius: 8upx 8upx 8upx 8upx;
      margin-left: 32upx;
      margin-top: 12upx;
      padding-left: 78upx;
    }

    .search_img {
      width: 40rpx;
      height: 40rpx;
      position: absolute;
      left: 50rpx;
      margin-top: 28rpx;
    }

    .search_btn {
      width: 116upx;
      height: 68upx;
      background: #e0a76d;
      border-radius: 34upx 34upx 34upx 34upx;
      line-height: 68upx;
      color: #ffffff;
      margin-top: 10upx;
      margin-left: 32upx;
    }
  }

  .head_riqi_box {
    height: 94upx;
    background: #ffffff;

    /deep/ .uni-date {
      width: 290upx;
      height: 50upx;
      background: #f3f3f3;
      border-radius: 58upx 58upx 58upx 58upx;
    }

    /deep/ .uni-date-x--border {
      border: none !important;
    }

    /deep/ .uni-date-x {
      margin-top: 6upx;
    }

    .zhi_txt {
      color: #999999;
      line-height: 94upx;
    }

    .shaixuan_btn {
      width: 104upx;
      height: 50upx;
      background: #666666;
      border-radius: 25upx 25upx 25upx 25upx;
      line-height: 50upx;
      color: #ffffff;
      margin-top: 18upx;
      margin-left: 6upx;
    }
  }

  .list_box {
    width: 686upx;
    background: #ffffff;
    margin-top: 20upx;
    padding: 32upx 32upx 0 32upx;

    .state_txt {
      color: #000000;
    }

    .state_zhifu {
      color: #ff3f4a;
    }

    .xdr_phone_box {
      width: 642upx;
      height: 36upx;
      background: #f4f5f9;
      border-radius: 8upx 8upx 8upx 8upx;
      padding: 12upx 22upx 12upx 22upx;
      margin-top: 24upx;

      .xdr_txt {
        color: #999999;
      }

      .phone_txt {
        color: #999999;
      }
    }

    .goods_img_name_money {
      margin-top: 40upx;

      .goods_img {
        width: 116upx;
        height: 116upx;
        border-radius: 8upx;
        overflow: hidden;
      }

      .goods_name {
        width: 350rpx;
        color: #333333;
        margin-left: 26upx;
        margin-top: 22upx;
        display: -webkit-box;
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }

      .goods_money_box {
        margin-top: 18upx;
        margin-left: 110upx;

        .goods_money_top {
          color: #000000;
        }

        .goods_num {
          color: #666666;
          margin-top: 10upx;
        }
      }
    }

    .edit_state_box {
      margin-top: 18upx;
      right: 0;
      padding-bottom: 20upx;
      display: flex;
      justify-content: flex-end;

      .edit_money {
        width: 157upx;
        height: 58upx;
        border-radius: 30upx 30upx 30upx 30upx;
        line-height: 58upx;
        border: 1upx solid #cccccc;
        margin-right: 18upx;
      }
    }
  }
}

page {
  background-color: rgba(244, 245, 249, 1);
}

.header_share {
  height: 94upx;
  background: #ffffff;
  width: 94%;
  margin: 0 auto;

  .uni_ipt {
    width: 100%;
    height: 68upx;
    background: #f3f3f3;
    border-radius: 8rpx;
    margin-top: 12upx;
    padding-left: 28upx;
  }
}

.menu {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 124rpx;
  padding: 0px 34rpx;

  .left {
    width: 70%;
    display: flex;
    align-items: center;
    .img {
      width: 84rpx;
      height: 84rpx;
    }

    .text {
      margin-left: 20rpx;
      font-family: AppleSystemUIFont;
      font-size: 32rpx;
			font-weight: bold;
      color: #333;
    }
  }

  .right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 30%;
    height: 84rpx;
    text-align: right;
    /deep/.uni-badge--x {
      vertical-align: top;
    }
  }
}

.item {
  width: 100%;
  padding-top: 30rpx;
  border-top: 2px solid rgba(244, 245, 249, 1);
  padding-bottom: 20rpx;

  .box {
    width: 94%;
    margin: 0 auto;

    .head {
      display: flex;
      align-items: center;

      .text1 {
        font-family: AppleSystemUIFont;
        font-size: 30rpx;
        color: #333333;
        line-height: 36rpx;
      }

      .text2 {
        padding-top: 8rpx;
        font-family: AppleSystemUIFont;
        font-size: 26rpx;
        color: #999999;
        line-height: 32rpx;
      }
    }

    .list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20rpx;
      &-content {
        height: 32rpx;
        line-height: 32rpx;
        font-size: 26rpx;
        color: #999;
      }
    }

    .shje {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #999999;
    }

    .shstatus {
      padding-top: 8rpx;
      display: flex;
      align-items: center;
      color: #6ec844;
      font-family: AppleSystemUIFont;
      font-size: 24rpx;
      color: #999999;
      justify-content: flex-end;
    }

    .info {
      margin-top: 20rpx;

      .infoText {
        color: rgba(153, 153, 153, 1);
        font-size: 24rpx;
      }
    }

    .warp {
      width: 100%;
      display: flex;

      .left {
        width: 50%;
      }

      .right {
        width: 50%;
        text-align: right;
      }
    }
  }
}
</style>
